<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/react/18.3.1/umd/react.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.20.15/babel.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <!--  记得加type="text/babel" -->
    <script type="text/babel">
      const name = '汪哥'
      const age = 15
      const num1 = 1
      const num2 = 2
      const user = { name: 'jame' }
      function sayHello(name) {
        return `你好，${name}`
      }
      // jsx
      const h1Vnode = (
        <h1 className="greeting" id="1">
          Hello, world!
        </h1>
      )

      const divVnode = (
        <>
          {/* 这是jsx中的注释 */}
          <h1>
            {null} - undefined - {false} - {true} - {0}
          </h1>
          <div>
            大名：{name}，{JSON.stringify(user)}
          </div>
          <div>年龄：{age + 1}</div>
          <div>是否成年：{age >= 18 ? '成年了' : '未成年'}</div>
          <div>和：{num1 + num2}</div>
          {h1Vnode}
          <p className="content">我是p标签</p>
          <input type="text" value="你好" />
        </>
      )

      // 将虚拟节点插入到dom树中
      ReactDOM.createRoot(document.getElementById('root')).render(divVnode)
    </script>
  </body>
</html>
